<template>
  <div class="city_container">
    <div class="tt_city">所在地区</div>
    <ul class="tab">
      <li 
        :class=" tabIndex == 0 ? 'active':''"
        @click="tabList(0)"
      >
        <span>{{ p}}</span>
      </li>
      <li 
      v-if="index != null"
      :class=" tabIndex == 1 ? 'active':''"
       @click="tabList(1)"
      >
        <span>{{ c}}</span>
      </li>
      <li 
      v-if="square != null"
      :class=" tabIndex == 2 ? 'active':''"
       @click="tabList(2)"
      >
        <span>{{ d }}</span>
      </li>
    </ul>
    <div class="tt_com" ref="comRef">
      <div class="box" :style="`transform:translateX(${distance}px)`">
        <div class="cc_item province" style="background: #fff">
          <ul>
            <li
              v-for="(item, i) in list"
              :key="i"
              @click="clickProvince(item.n, i)"
              :class="index == i ? 'active' : ''"
            >
              <span>{{ item.n }}</span>
              <van-icon class="success_icon" name="success" color="#fc4141" />
            </li>
          </ul>
        </div>
        <div class="cc_item city" style="background: #f5f5f5">
          <ul v-if="isCity">
            <li
              v-for="(ele, i) in list[index].c"
              :key="i"
              @click="clickCity(ele.n, i)"
              :class="square == i ? 'active' : ''"
            >
              <span>{{ ele.n }}</span>
              <van-icon class="success_icon" name="success" color="#fc4141" />
            </li>
          </ul>
        </div>
        <div class="cc_item detail" style="background: #fff">
          <ul v-if="isDetail">
            <li
              v-for="(item, i) in list[index].c[square].c"
              :key="i"
              @click="clickDetail(item.n, i)"
              :class="count == i ? 'active' : ''"
            >
              <span>{{ item.n }}</span>
              <van-icon class="success_icon" name="success" color="#fc4141" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      index: null, // 省的索引值
      square: null, // 市的索引值
      count: null, // 区的索引值
      tabIndex:0,
      p: "请选择", // 当前选择的省份,
      c: "请选择",
      d: "请选择",
      isCity: false,
      isDetail: false,

      
      distance:0,

     
    };
  },
  watch: {
    index(val) {
      this.isFlag == 0;
    },
    //   square(val){
    //       this.isDetail = true
    //       this.count = null
    //   }
  },
  computed: {},
  created() {
    this.initCityData();
  },
  methods: {
    initCityData() {
      // console.log("xx")
      let url = "/api/city_list";
      let pro = axios({
        url: url,
        method: "get",
      })
        .then((res) => {
          this.list = res.data.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    clickProvince(province, i) {
      // this.isFlag = 1;
      this.p = province;
      this.isCity = true;
      this.index = i;
      //   if(this.list)
      this.square = null;

      this.isDetail = false;
        this.tabIndex = 1
      
      this.distance = -(Math.ceil(this.$refs.comRef.offsetWidth / 2))
    },

    clickCity(City, i) {
      this.isDetail = true;
     
      this.c = City;
      this.square = i;
      this.count = null
      this.tabIndex = 2
      
    },

    clickDetail(detail, i) {
      this.d = detail;
      this.count = i;

        let obj = {
            p:this.p,
            c:this.c,
            d:this.d
        }
      this.$emit('share-address',obj)
    },

    tabList(i){
        this.tabIndex = i
        if(this.tabIndex == 0){
            this.distance = 0
        }else if(this.tabIndex == 2){
            this.distance = -(Math.ceil(this.$refs.comRef.offsetWidth / 2))
        }
    }
  },
};
</script>

<style lang="scss" scoped>
.city_container {
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  .tt_city {
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 15px;
    color: #333;
  }
  .tab {
    padding: 0 15px;
    height: 40px;
    display: flex;
    
    li {
      height: 40px;
      line-height: 40px;
      padding: 0 12px;
     
      
      font-size: 13px;margin-right:10px ;
      color: #282828;
    }
    li.active{
        border-bottom: 2px solid #f23030;
         color: #f23030;
    }
  }
  .tt_com {
    width: 100%;
    height: 282px;
    overflow: hidden;
    .box {
      height: 282px;
      display: flex;
      background-color: pink;
      width: 150%;
      transition: all 0.7s ease;
      //   float: left;

      .cc_item::-webkit-scrollbar {
        display: none;
      }
      .cc_item {
        // flex-grow: 0;
        // width:33.3%;
        width: 300px;
        height: 100%;
        background-color: pink;
        overflow-y: auto;
        ul {
          li {
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            color: #333;
            display: flex;
            padding: 0 26px;
            justify-content: space-between;
            align-items: center;
          
            .success_icon {
              display: none;
            }
          }

          li.active span {
            color: #fc4141;
          }
          li.active .success_icon {
            display: block;
          }
        }
      }
    }
  }
}
</style>

